<template>
  <div style="width: 960px; margin: 20px auto">
    <el-tabs
      :tab-position="tabPosition"
      :v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane label="个人信息">
        <div style="margin: 20px"></div>
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="userInfo"
        >
          <el-form-item label="昵称">
            <el-input
              v-model="userInfo.nickname"
              disabled="disabled"
            ></el-input>
          </el-form-item>
          <el-form-item label="我的签名">
            <el-input type="textarea" v-model="userInfo.sign"></el-input>
          </el-form-item>

          <el-form-item label="年龄">
            <el-col :span="24">
              <el-select v-model="userInfo.age" placeholder="请选择">
                <el-option
                  v-for="item in ageRanges"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="userInfo.sex">
              <el-radio label="1">男</el-radio>
              <el-radio label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-button
            type="primary"
            @click="updateInfo"
            style="margin-left: 80px"
            >保存</el-button
          >
        </el-form></el-tab-pane
      >
      <el-tab-pane label="我的课程" name="mycourse">
        <div class="my-course-div">
          <ul>
            <li v-for="(data, idx) in myCourseList" :key="idx">
              <div class="img-div">
                <img :src="data.cover" :alt="data.title" />
              </div>
              <div class="title-a-div">
                <a :href="'/course/' + data.id">{{
                  "【" + data.title + "】"
                }}</a>
              </div>
              <div class="teacherName-a-div">
                <a :href="'/teacher/' + data.teacherId">{{
                  data.teacherName
                }}</a>
              </div>
            </li>
          </ul>
        </div>
        <el-pagination
          class="pagination-div"
          :hide-on-single-page="false"
          :total="csTotal"
          :page-size="6"
          :current-page="csPageNo"
          layout="prev, pager, next"
          @current-change="handleCurrentChange2"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="我的收藏" name="mycollect">
        <div class="my-course-div">
          <ul>
            <li v-for="(data, idx) in myCollectList" :key="idx">
              <div class="img-div">
                <img :src="data.cover" :alt="data.title" />
              </div>
              <div class="title-a-div">
                <a :href="'/course/' + data.id">{{
                  "【" + data.title + "】"
                }}</a>
              </div>
              <div class="teacherName-a-div">
                <a :href="'/teacher/' + data.teacherId">{{
                  data.teacherName
                }}</a>
              </div>
            </li>
          </ul>
        </div>

        <div class="pagination-div">
          <el-pagination
            :hide-on-single-page="false"
            :total="ctTotal"
            layout="prev, pager, next"
            :page-size="6"
            :current-page="ctPageNo"
            @click="getMyCourse"
            @current-change="handleCurrentChange1"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的记录">我的记录</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import myselfApi from "@/api/myself/myself";
import cookie from "js-cookie";
export default {
  data() {
    return {
      tabPosition: "left",
      labelPosition: "right",
      myBirthday: "",
      activeName: "myself",
      userInfo: {
        id: "",
        nickname: "",
        avatar: "",
        sign: "",
        age: "",
        sex: "",
      },
      ageRanges: [],
      myCourseList: [],
      csTotal: 0,
      csPageNo: 1,
      myCollectList: [],
      ctTotal: 0,
      ctPageNo: 1,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化年龄下拉选项
    initOptions() {
      for (let i = 0; i < 120; i++) {
        let obj = {
          value: i,
          label: i,
        };
        this.ageRanges.push(obj);
      }
    },
    //tab单击
    handleClick(tab, event) {
      if (tab.name == "mycourse") {
        // 触发‘配置管理’事件
        this.getMyCourse();
        this.myCollectList = {};
      } else if (tab.name == "mycollect") {
        // 触发‘用户管理’事件
        this.getMyCollect();
        this.myCourseList = {};
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    init() {
      this.initOptions();
      var userStr = cookie.get("guli_ucenter");
      if (userStr) {
        //把字符串转换json对象
        this.userInfo = JSON.parse(userStr);
        this.getUserInfo();
      } else {
        //未登录
        this.$notify({
          title: "您暂无登录信息",
          message: "请登录后操作",
          offset: 100,
        });
        this.$router.push({
          path: "/login",
        });
      }
    },
    //获取年纪大小
    getAge() {
      let birthdays = new Date(this.myBirthday.replace(/-/g, "/"));
      let d = new Date();
      let age =
        d.getFullYear() -
        birthdays.getFullYear() -
        (d.getMonth() < birthdays.getMonth() ||
        (d.getMonth() == birthdays.getMonth() &&
          d.getDate() < birthdays.getDate())
          ? 1
          : 0);
      this.userInfo.age = age;
    },
    updateInfo() {
      if (this.myBirthday) {
        this.getAge();
      }
      myselfApi.updateUserInfo(this.userInfo).then((res) => {
        if (res.data.code == 20000) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          this.getUserInfo();
        } else {
          this.$message({
            message: "更新错误",
            type: "error",
          });
        }
      });
    },
    getUserInfo() {
      myselfApi.getUserInfo(this.userInfo.id).then((res) => {
        if (res.data.data.member) {
          res.data.data.member.sex = String(res.data.data.member.sex);
          this.userInfo = Object.assign(this.userInfo, res.data.data.member);
        }
      });
    },
    // 我的课程
    getMyCourse(pageNo) {
      if (!pageNo) {
        pageNo = this.csPageNo;
      }
      myselfApi.getMyCourses(pageNo, 6, this.userInfo.id).then((res) => {
        this.myCourseList = res.data.data.rows;
        this.csTotal = res.data.data.total;
      });
    },
    handleCurrentChange2(val) {
      this.getMyCourse(val);
    },
    // 我的收藏
    getMyCollect(pageNo) {
      if (!pageNo) {
        pageNo = this.ctPageNo;
      }
      myselfApi.getMyCollects(pageNo, 6, this.userInfo.id).then((res) => {
        this.myCollectList = res.data.data.rows;
        this.ctTotal = res.data.data.total;
      });
    },
    handleCurrentChange1(val) {
      this.getMyCollect(val);
    },
  },
};
</script>

<style>
.my-course-div ul {
  width: 100%;
  height: 540px;
  overflow: hidden;
}
.my-course-div ul li {
  width: 33.3%;
  height: 50%;
  display: inline-block;
  text-align: left;
  box-sizing: border-box;
  padding: 0 22.5px;
}
.img-div img {
  width: 240px;
  height: 180px;
}
.teacherName-a-div {
  text-align: left;
  font-size: 12px;
}
.title-a-div {
  font-size: 18px;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pagination-div {
  text-align: center;
  margin: 0 auto;
}
</style>